<template>
	<view class="modify-wrap">
		<uni-card class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom:20rpx;">
				<uni-col :span="5">
					<text class="tit">联系人</text>
				</uni-col>
				<uni-col :span="19">
					<input class="input" v-model="formData.contacts" placeholder="请输入联系人" placeholder-class="placeholder"/>
				</uni-col>
			</uni-row>
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom:20rpx;">
				<uni-col :span="5">
					<text class="tit">电话</text>
				</uni-col>
				<uni-col :span="19">
					<input class="input" v-model="formData.phone" placeholder="请输入联系人电话" placeholder-class="placeholder"/>
				</uni-col>
			</uni-row>	
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom:20rpx;">
				<uni-col :span="5">
					<text class="tit">地区</text>
				</uni-col>
				<uni-col :span="19">
					<view @click="getLocation">
						<input class="input location" v-model="formData.address" placeholder="选择地区" placeholder-class="placeholder" disabled/>
					</view>
				</uni-col>
			</uni-row>	
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom:20rpx;">
				<uni-col :span="5">
					<text class="tit">详细地址</text>
				</uni-col>
				<uni-col :span="19">
					<input class="input" v-model="formData.addressInfo" placeholder="请输入详细地址" placeholder-class="placeholder"/>
				</uni-col>
			</uni-row>	
		</uni-card>
		<uni-card class="bind-card">
			<uni-row class="demo-uni-row" :gutter="8" style="margin-top: 20rpx; padding-bottom:20rpx;">
				<uni-col :span="5">
					<text class="tit">标签</text>
				</uni-col>
				<uni-col :span="19">
					<uni-tag text="家" size="small" inverted="true" type="error" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
					<uni-tag text="公司" size="small" inverted="true" type="default" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
					<uni-tag text="公司" size="small" inverted="true" type="default" style="margin-right: 0.2rem; margin-bottom: 0.3rem;"></uni-tag>
				</uni-col>
				<uni-col :span="12" style="64rpx">
					<text class="tit" style="line-height: 64rpx;">设为默认地址</text>
				</uni-col>
				<uni-col :span="12" style="text-align: right;">
					<switch :checked="formData.isDefault" color="#FF536F" @change="onSwitchChange" />
				</uni-col>
			</uni-row>
		</uni-card>
		<tui-button style="margin: auto; margin-top: 16rpx;" width="88%" height="90rpx" :size="30" type="primary" shape="circle">新增地址</tui-button>
	</view>
</template>

<script>
	import tuiButton from '@/components/button/button';
	export default {
		components: {
			tuiButton,
		},
		data() {
			return {
				// 表单数据
				formData: {
					address: ''
				}
			}
		},
		methods: {
			onSwitchChange(e) {
				console.log(e)
			},
			getLocation() {
				const curVue = this
				uni.chooseLocation({
				    success: function (res) {
						console.log('全部信息：' + JSON.stringify(res));
				        console.log('位置名称：' + res.name);
				        console.log('详细地址：' + res.address);
				        console.log('纬度：' + res.latitude);
				        console.log('经度：' + res.longitude);
						curVue.formData.address = res.address
				    }
				});
			}
		}
	}
</script>

<style>
	.modify-wrap{
		height: 100vh;
	}
	.demo-uni-row:not(:last-child){
		border-bottom: solid 1px #878787;
	}
	.bind-card{
		margin: 0 0 24rpx 0;
	}
	.location::after{
		content: '\e6d8';
		display: block;
		position: absolute;
		right: 0;
		font-size: 1.5rem;
		font-family: "iconfont" !important;
		top:40%;
		margin-top: -.75rem;
	}
</style>
